<template>
  <div class="search">
    <a-collapse
      v-model="collapseKey"
      accordion
      :bordered="false"
      defaultActiveKey="2"
      @change="collapseChange"
    >
      <template #expandIcon="props">
        <a-icon type="caret-right" :rotate="props.isActive ? 90 : 0" />
      </template>
      <a-collapse-panel key="1" header="关键词搜索">
        <div class="searchInput">
          <div class="label inline-b">关键词：</div>
          <a-input
            v-model="searchKey"
            class="inline-b"
            placeholder="请输入订单编号、品名、规格、仓库、公司名称、备注等关键词"
          ></a-input>
        </div>
      </a-collapse-panel>
      <a-collapse-panel key="2" header="条件筛选">
        <c-form
          v-model="powerSearchForm"
          :data="powerSearchFormData"
          :col="{ labelCol: { span: 9 }, wrapperCol: { span: 15 } }"
        >
          <span
            :slot="item.prop"
            v-for="item in powerSearchFormData"
            :key="item.prop"
          >
            <span>{{ item.label }} (</span>
            <span :class="[item.mode === 'multiple' ? 'success' : 'danger']"
              >{{ item.mode === "multiple" ? "多选" : "单选" }} </span
            >)
          </span>
        </c-form>
      </a-collapse-panel>
    </a-collapse>
    <a-alert
      type="warning"
      class="tips"
      message="温馨提示：筛选条件由于数据过多，查询结果花费时间较长，请耐心等待！"
      show-icon
    />
  </div>
</template>

<script>
const powerSearchFormData = [
  {
    label: "品种",
    prop: "category",
    type: "select",
    typeData: [
      {
        label: "aaa",
        value: 1
      },
      {
        label: "bbb",
        value: 2
      },
      {
        label: "ccc",
        value: 3
      }
    ],
    clear: true,
    labelSlot: "category"
  },
  {
    label: "交易公司",
    prop: "company",
    type: "select",
    clear: true,
    labelSlot: "company"
  },
  {
    label: "成交状态",
    prop: "deal",
    type: "select",
    clear: true,
    labelSlot: "deal"
  },
  {
    label: "关联状态",
    prop: "relevance",
    type: "select",
    clear: true,
    labelSlot: "relevance"
  },
  {
    label: "品牌",
    prop: "brand",
    type: "select",
    mode: "multiple",
    clear: true,
    typeData: [
      {
        label: "aaa",
        value: 1
      },
      {
        label: "bbb",
        value: 2
      },
      {
        label: "ccc",
        value: 3
      },
      {
        label: "cdd",
        value: 4
      }
    ],
    labelSlot: "brand"
  },
  {
    label: "规格",
    prop: "spec",
    type: "select",
    mode: "multiple",
    clear: true,
    labelSlot: "spec"
  },
  {
    label: "材质",
    prop: "material",
    type: "select",
    mode: "multiple",
    clear: true,
    labelSlot: "material"
  },
  {
    label: "地区",
    prop: "area",
    type: "select",
    mode: "multiple",
    clear: true,
    labelSlot: "area"
  },
  {
    label: "仓库",
    prop: "warehouse",
    type: "select",
    mode: "multiple",
    clear: true,
    labelSlot: "warehouse"
  }
];

export default {
  data() {
    return {
      collapseKey: "2",
      searchKey: "",
      powerSearchFormData,
      powerSearchForm: {
        category: [],
        company: [],
        deal: [],
        relevance: [],
        brand: [],
        spec: [],
        material: [],
        area: [],
        warehouse: []
      }
    };
  },
  methods: {
    collapseChange(key) {
      if (key) {
        this.collapseKey = key;
        this.searchKey = "";
        for (const key in this.powerSearchForm) {
          this.powerSearchForm[key] = [];
        }
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import "@/styles/theme/color.scss";

.search {
  .ant-collapse {
    background-color: #fff;
    .anticon-caret-right {
      @extend .primary;
    }
  }
  .searchInput {
    margin-bottom: 24px;
    .label {
      width: 141px;
      color: rgba(0, 0, 0, 0.85);
      text-align: right;
    }
    .ant-input {
      width: 500px;
    }
  }
  ::v-deep .ant-row {
    display: inline-block;
    width: 50%;
  }
  .tips {
    margin-top: 24px;
  }
}
</style>
